<template>
    <div class="tr"
        :style="{ backgroundImage: contentBackgroundImage, backgroundSize: 'cover', backgroundPosition: 'center' }">
        <div class="title">
            <div class="title-left"><img class="logo-left" :src="logoLeft" alt=""></div>
            <div class="title-middle">
                <div>
                    <Decoration7 style="height: 100%;">{{ formatConfigData.titleName }}</Decoration7>
                </div>
            </div>
            <div class="title-right"><img class="logo-right" :src="logoRight" alt=""></div>
        </div>
        <div class="top" :style="{ height: formatConfigData.topHeight }">
            <template v-for="(itm, index) in formatConfigData.topList" :key="index">
                <component v-if="itm.show == true" :is="chartBorderComponent[itm.border]"
                    :color="[itm.borderColor1, itm.borderColor2]" :style="{ flex: itm.flex }">
                    <div
                        style="height: 100%;width: 100%;  box-sizing: border-box; display: flex; align-items: center;justify-content: center;">
                        <div
                            :style="{ height: 'calc(100% - ' + myScale(itm.padding) + 'px )', width: 'calc(100% - ' + myScale(itm.padding) + 'px )' }">
                            <div class="top-itm"
                                :style="{ display: 'flex', flexDirection: itm.direction, height: '100%' }">
                                <div :style="{ height: '100%', width: '100%', flex: itm1.flex }"
                                    v-for="(itm1, index1) in itm.config">
                                    <component :modelType="'topList'" :modelRow="index"
                                        :is="chartComponents[itm1.components]" :data="itm1" />
                                </div>
                            </div>
                        </div>
                    </div>
                </component>
            </template>
        </div>
        <div class="line" :style="{ height: formatConfigData.topLineHeight }">
            <Decoration2 style="width:100%;height:5px;" />
        </div>
        <div class="bottom" :style="{ height: formatConfigData.bottomHeight, width: '100%' }">
            <template v-for="(itm, index) in formatConfigData.bottomList" :key="index">
                <component v-if="itm.show == true" :is="chartBorderComponent[itm.border]"
                    :color="[itm.borderColor1, itm.borderColor2]" :style="{ flex: itm.flex }">
                    <div
                        style="height: 100%;width: 100%;  box-sizing: border-box; display: flex; align-items: center;justify-content: center;">
                        <div
                            :style="{ height: 'calc(100% - ' + myScale(itm.padding) + 'px )', width: 'calc(100% - ' + myScale(itm.padding) + 'px )' }">
                            <div class="bottom-itm"
                                :style="{ display: 'flex', flexDirection: itm.direction, flex: itm.flex, height: '100%', width: '100%' }">

                                <div :style="{ height: '100%', width: '100%', flex: itm1.flex }"
                                    v-for="(itm1, index1) in itm.config">
                                    <component :modelType="'bottomList'" :modelRow="index"
                                        :is="chartComponents[itm1.components]" :data="itm1" />
                                </div>
                            </div>
                        </div>
                    </div>
                </component>
            </template>
        </div>
    </div>
    <globalConfig ref="refGlobalConfig" @emitGetDataEv="globalonfigEv" />
    <modelConfig ref="refModelConfig" @emitGetDataEv="modelConfigEv" />
</template>

<script setup>
import { ref, provide, reactive, computed, onMounted, onActivated, onUnmounted } from 'vue'
import { loadingStore } from '@/stores/index.js'
import globalConfig from '@/components/chart/globalConfig.vue'
import modelConfig from '@/components/chart/modelConfig.vue'
import { myScale } from '@/utils/myScale.js'
import { chartComponents } from '@/utils/chart.js'
import { chartBorderComponent } from '@/utils/chart.js'
import { useRoute } from 'vue-router';
// https://github.com/xfy520/vue3-seamless-scroll
import { Decoration7, Decoration2 } from '@/components/@dataview/datav-vue3'
import { ChartPkGet, ChartPkPut } from '@/api/chart/index.js'
import { uploatFiledGet } from '@/api/setting/file/index.js'


const route = useRoute();
const chartId = route.params.id
const loading = loadingStore()
const refGlobalConfig = ref(null)
const refModelConfig = ref(null)
const logoLeft = ref('/static/images/logo-right.png')
const logoRight = ref('/static/images/logo-right.png')
const contentBackgroundImage = ref(null)

const modelType = ref('top')
const modelRow = ref(0)

// fontWeight：normal(正常)、bold(加粗)
const configData = reactive({

    backgroundColor: 'rgba(19, 44, 108, 1)',
    backgroundImages: '',
    titleName: '***智能仓数据看板',
    titleFontSize: 30,
    titleFontWeight: 'bold',
    titleFontColor: 'rgba(255, 255, 255, 1)',
    titleLeftLogo: '',
    titleLeftLogoWidth: 30,
    titleRightLogo: '',
    titleRightLogoWidth: 60,
    titleHeight: 60,
    topHeight: 250,
    topLineHeight: 20,
    topList: [
        // {
        //     flex: 1,
        //     show: true,
        //     direction: 'row',
        //     border: 'BorderBox12',
        //     borderColor1: "#6586ec",
        //     borderColor2: "#2CF7FE",
        //     padding: 10,
        //     config: [
        //         { flex: 1, backgroundColor: "rgba(19, 44, 108, 0)", border: "BorderBox13", borderColor1: "#6586ec", borderColor2: "#2CF7FE", components: "panel", contentFontColor: "rgba(219,156,28, 1)", contentFontSize: 30, lineBackgroundColor: "rgba(255,255,255, 1)", lineHeight: 2, nameFontColor: "rgba(255,255,255, 1)", nameFontSize: 25, nameHeight: 70, padding: 10, pool: "", pool_name: "", show: true, sql: "", text: { contentLeft: "4pcs/7单", contentRight: "4pcs/7单", name: "入库信息1", titleLeft: "当日待入库", titleRight: "当日待入库" }, time: 4, titleFontColor: "rgba(255,255,255, 1)", titleFontSize: 20, titleHeight: 60 },
        //         { flex: 2, backgroundColor: "rgba(19, 44, 108, 0)", border: "BorderBox13", borderColor1: "#6586ec", borderColor2: "#2CF7FE", components: "panel", contentFontColor: "rgba(219,156,28, 1)", contentFontSize: 30, lineBackgroundColor: "rgba(255,255,255, 1)", lineHeight: 2, nameFontColor: "rgba(255,255,255, 1)", nameFontSize: 25, nameHeight: 70, padding: 10, pool: "", pool_name: "", show: true, sql: "", text: { contentLeft: "4pcs/7单", contentRight: "4pcs/7单", name: "入库信息1", titleLeft: "当日待入库", titleRight: "当日待入库" }, time: 4, titleFontColor: "rgba(255,255,255, 1)", titleFontSize: 20, titleHeight: 60 }
        //     ]
        // },
        // {
        //     flex: 1,
        //     show: true,
        //     direction: 'row',
        //     padding: 10,
        //     border: 'BorderBox13',
        //     borderColor1: "#6586ec",
        //     borderColor2: "#2CF7FE",
        //     config: [{ backgroundColor: "rgba(19, 44, 108, 0)", border: "BorderBox13", borderColor1: "#6586ec", borderColor2: "#2CF7FE", components: "panel", contentFontColor: "rgba(219,156,28, 1)", contentFontSize: 30, lineBackgroundColor: "rgba(255,255,255, 1)", lineHeight: 2, nameFontColor: "rgba(255,255,255, 1)", nameFontSize: 25, nameHeight: 70, padding: 10, pool: "", pool_name: "", show: true, sql: "", text: { contentLeft: "4pcs/7单", contentRight: "4pcs/7单", name: "入库信息", titleLeft: "当日待入库", titleRight: "当日待入库" }, time: 4, titleFontColor: "rgba(255,255,255, 1)", titleFontSize: 20, titleHeight: 60 }]
        // }

    ],
    bottomList: [
        // {
        //     flex: 1,
        //     show: true,
        //     direction: 'column',
        //     border: 'BorderBox12',
        //     borderColor1: "#6586ec",
        //     borderColor2: "#2CF7FE",
        //     padding: 10,
        //     config: [
        //         {
        //             components: 'pie',
        //             show: true,
        //             // 背景颜色
        //             backgroundColor: 'rgba(19, 44, 108, 0)',
        //             // 边框颜色1
        //             borderColor1: '#6586ec',
        //             // 边框颜色2
        //             borderColor2: '#2CF7FE',
        //             border: 'borderA001',
        //             padding: 10,
        //             pool: '',
        //             pool_name: '',
        //             sql: '',
        //             time: 4,
        //             config: {
        //                 title: {
        //                     text: '当日入库排名',
        //                     left: 'left',
        //                     textStyle: {
        //                         // fontWeight: "bold", //标题自提提粗细
        //                         fontSize: 20, //标题字体大小
        //                         color: 'rgba(255,255,255, 1)', // 文字颜色 //标题字体颜色
        //                     },
        //                 },
        //                 tooltip: {
        //                     trigger: 'item'
        //                 },
        //                 series: [
        //                     {
        //                         name: '',
        //                         type: 'pie',
        //                         radius: '40%',
        //                         center: ['50%', '50%'], // 设置饼图中心和容器中心对齐
        //                         data: [
        //                             { value: 1048, name: '苹果' },
        //                             { value: 735, name: '细化' },
        //                             { value: 580, name: '哈密瓜' },
        //                             { value: 484, name: '烧烤' },
        //                             { value: 300, name: '小龙虾' }
        //                         ],
        //                         label: {
        //                             show: true, // 开启显示
        //                             position: 'outside', // 设置标签位置为扇区外部
        //                             formatter: '{b}: {d}%\n{c}', // 格式化器，显示名称、百分比和数值
        //                             color: '#FFFFFF', // 文字颜色
        //                             fontSize: 12, // 文字大小
        //                             boxSizing: 'border-box'
        //                             // fontWeight: 'bold' // 文字加粗
        //                         },
        //                         emphasis: {
        //                             itemStyle: {
        //                                 shadowBlur: 10,
        //                                 shadowOffsetX: 0,
        //                                 shadowColor: 'rgba(0, 0, 0, 0.5)'
        //                             }
        //                         }
        //                     }
        //                 ]
        //             }
        //         },
        //         {
        //             components: 'pie',
        //             show: true,
        //             // 背景颜色
        //             backgroundColor: 'rgba(19, 44, 108, 0)',
        //             // 边框颜色1
        //             borderColor1: '#6586ec',
        //             // 边框颜色2
        //             borderColor2: '#2CF7FE',
        //             border: 'borderA001',
        //             padding: 10,
        //             pool: '',
        //             pool_name: '',
        //             sql: '',
        //             time: 4,
        //             config: {
        //                 title: {
        //                     text: '当日入库排名',
        //                     left: 'left',
        //                     textStyle: {
        //                         // fontWeight: "bold", //标题自提提粗细
        //                         fontSize: 20, //标题字体大小
        //                         color: 'rgba(255,255,255, 1)', // 文字颜色 //标题字体颜色
        //                     },
        //                 },
        //                 tooltip: {
        //                     trigger: 'item'
        //                 },
        //                 series: [
        //                     {
        //                         name: '',
        //                         type: 'pie',
        //                         radius: '40%',
        //                         center: ['50%', '50%'], // 设置饼图中心和容器中心对齐
        //                         data: [
        //                             { value: 1048, name: '苹果' },
        //                             { value: 735, name: '细化' },
        //                             { value: 580, name: '哈密瓜' },
        //                             { value: 484, name: '烧烤' },
        //                             { value: 300, name: '小龙虾' }
        //                         ],
        //                         label: {
        //                             show: true, // 开启显示
        //                             position: 'outside', // 设置标签位置为扇区外部
        //                             formatter: '{b}: {d}%\n{c}', // 格式化器，显示名称、百分比和数值
        //                             color: '#FFFFFF', // 文字颜色
        //                             fontSize: 12, // 文字大小
        //                             boxSizing: 'border-box'
        //                             // fontWeight: 'bold' // 文字加粗
        //                         },
        //                         emphasis: {
        //                             itemStyle: {
        //                                 shadowBlur: 10,
        //                                 shadowOffsetX: 0,
        //                                 shadowColor: 'rgba(0, 0, 0, 0.5)'
        //                             }
        //                         }
        //                     }
        //                 ]
        //             }
        //         }
        //     ]
        // },
        // {
        //     flex: 1,
        //     show: true,
        //     direction: 'row',
        //     padding: 10,
        //     border: 'BorderBox13',
        //     borderColor1: "#6586ec",
        //     borderColor2: "#2CF7FE",
        //     config: [
        //         {
        //             components: 'scrollTable',
        //             show: true,
        //             // 背景颜色
        //             backgroundColor: 'rgba(19, 44, 108, 0)',
        //             // 边框颜色1
        //             borderColor1: '#6586ec',
        //             // 边框颜色2
        //             borderColor2: '#2CF7FE',
        //             border: 'borderA001',
        //             padding: 10,
        //             pool: '',
        //             pool_name: '',
        //             sql: '',
        //             time: 4,
        //             oddBackgroundColor: 'rgba(0,59,81, 1)',
        //             evenBackgroundColor: 'rgba(10,39,50, 1)',
        //             headerBackgroundColor: 'rgba(0,125,190, 1)',
        //             hoverBackgroundColor: 'rgba(0,125,190, 1)',
        //             color: 'rgba(255,255,255, 1)',
        //             fontSize: 18,
        //             tableFiled: [
        //                 {
        //                     prop: 'index',
        //                     label: "#",
        //                     width: "50"
        //                 }, {
        //                     prop: 'sys_date',
        //                     label: "创建日期",
        //                     width: "auto"
        //                 }, {
        //                     prop: 'name',
        //                     label: "产品名称",
        //                     width: "auto"
        //                 }, {
        //                     prop: 'spc',
        //                     label: "产品规格",
        //                     width: "auto"
        //                 }
        //             ],
        //             title: {
        //                 text: '当日入库排名',
        //                 fontWeight: "bold", //标题自提提粗细
        //                 fontSize: 20, //标题字体大小
        //                 color: 'rgba(255,255,255, 1)', // 文字颜色 //标题字体颜色,
        //                 height: 60,
        //                 paddingLeft: 20,
        //                 paddingRight: 0,
        //                 textAlign: 'left',
        //                 backgroundColor: 'rgba(255,255,255, 0)'
        //             },
        //         }
        //     ]
        // },
        // {
        //     flex: 1,
        //     show: true,
        //     direction: 'row',
        //     padding: 10,
        //     border: 'BorderBox13',
        //     borderColor1: "#6586ec",
        //     borderColor2: "#2CF7FE",
        //     config: [
        //         {
        //             components: 'scrollTable',
        //             show: true,
        //             // 背景颜色
        //             backgroundColor: 'rgba(19, 44, 108, 0)',
        //             // 边框颜色1
        //             borderColor1: '#6586ec',
        //             // 边框颜色2
        //             borderColor2: '#2CF7FE',
        //             border: 'borderA001',
        //             padding: 10,
        //             pool: '',
        //             pool_name: '',
        //             sql: '',
        //             time: 4,
        //             oddBackgroundColor: 'rgba(0,59,81, 1)',
        //             evenBackgroundColor: 'rgba(10,39,50, 1)',
        //             headerBackgroundColor: 'rgba(0,125,190, 1)',
        //             hoverBackgroundColor: 'rgba(0,125,190, 1)',
        //             color: 'rgba(255,255,255, 1)',
        //             fontSize: 18,
        //             tableFiled: [
        //                 {
        //                     prop: 'index',
        //                     label: "#",
        //                     width: "50"
        //                 }, {
        //                     prop: 'sys_date',
        //                     label: "创建日期",
        //                     width: "auto"
        //                 }, {
        //                     prop: 'name',
        //                     label: "产品名称",
        //                     width: "auto"
        //                 }, {
        //                     prop: 'spc',
        //                     label: "产品规格",
        //                     width: "auto"
        //                 }
        //             ],
        //             title: {
        //                 text: '当日入库排名',
        //                 fontWeight: "bold", //标题自提提粗细
        //                 fontSize: 20, //标题字体大小
        //                 color: 'rgba(255,255,255, 1)', // 文字颜色 //标题字体颜色,
        //                 height: 60,
        //                 paddingLeft: 20,
        //                 paddingRight: 0,
        //                 textAlign: 'left',
        //                 backgroundColor: 'rgba(255,255,255, 0)'
        //             },
        //         }
        //     ]
        // },
        // {
        //     flex: 1,
        //     show: true,
        //     direction: 'row',
        //     padding: 10,
        //     border: 'BorderBox13',
        //     borderColor1: "#6586ec",
        //     borderColor2: "#2CF7FE",
        //     config: [
        //         {
        //             components: 'capsule',
        //             show: true,
        //             // 背景颜色
        //             backgroundColor: 'rgba(19, 44, 108, 0)',
        //             // 边框颜色1
        //             borderColor1: '#6586ec',
        //             // 边框颜色2
        //             borderColor2: '#2CF7FE',
        //             border: 'borderA001',
        //             padding: 10,
        //             pool: '',
        //             pool_name: '',
        //             sql: '',
        //             time: 2,
        //             pageSize: 5,
        //             config: {
        //                 title: {
        //                     text: '当日入库排名',
        //                     left: 'left',
        //                     textStyle: {
        //                         // fontWeight: "bold", //标题自提提粗细
        //                         fontSize: 20, //标题字体大小
        //                         color: 'rgba(255,255,255, 0)', // 文字颜色 //标题字体颜色
        //                     },
        //                 },
        //                 tooltip: {
        //                     trigger: 'item'
        //                 },
        //                 grid: {
        //                     top: 50, //图像相对元素顶部距离
        //                     left: 80, //图像相对元素左边距离
        //                     right: 80, //图像相对元右边距离
        //                     bottom: 40, //图像相对元底部距离
        //                     width: "auto",
        //                     height: "auto"
        //                 },
        //                 // 区域缩放
        //                 dataZoom: [
        //                     {
        //                         // 第一个 dataZoom 组件
        //                         show: false,
        //                         type: "slider",
        //                         yAxisIndex: 0, // 表示这个 dataZoom 组件控制 第一个 xAxis
        //                         startValue: 0, // 数据窗口范围的起始数值index
        //                         endValue: 4 // 数据窗口范围的结束数值index
        //                     }
        //                 ],
        //                 yAxis: {
        //                     name: "日期",
        //                     type: "category",
        //                     data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'], //x轴字段栏位
        //                     axisLine: {
        //                         show: true //不显示坐标轴线
        //                     },
        //                     // 坐标轴名称颜色
        //                     nameTextStyle: {
        //                         color: 'rgba(255,255,255, 1)',
        //                         fontWeight: "normal", //y轴字体粗细
        //                         fontSize: 18 //y轴字体大小
        //                     },
        //                     axisLabel: {
        //                         // 文字倾斜
        //                         rotate: 0,
        //                         show: true, //是否显示x轴左边
        //                         color: 'rgba(255,255,255, 1)', //x轴字体颜色
        //                         fontWeight: "normal", //x轴字体粗细
        //                         fontSize: 18 //x轴字大小
        //                     }
        //                 },
        //                 xAxis: {
        //                     type: 'value',
        //                     color: 'rgba(255,255,255, 1)',
        //                     // 坐标轴名称颜色
        //                     nameTextStyle: {
        //                         color: 'rgba(255,255,255, 1)',
        //                         fontWeight: "normal", //y轴字体粗细
        //                         fontSize: 18 //y轴字体大小
        //                     },
        //                     max: 250,
        //                     name: "数量",
        //                     show: true,
        //                     axisTick: {
        //                         show: true //不显示坐标轴刻度线
        //                     },
        //                     axisLine: {
        //                         show: true //不显示坐标轴线
        //                     },
        //                     splitLine: {
        //                         show: true,
        //                         lineStyle: {
        //                             color: 'rgba(0,192,255,0)',
        //                             width: 1,
        //                             type: 'solid'
        //                         }
        //                     },
        //                     axisLabel: {
        //                         // 是否显示y轴左边
        //                         show: true,
        //                         color: 'rgba(255,255,255, 1)', //y轴字体颜色
        //                         fontWeight: "normal", //y轴字体粗细
        //                         fontSize: 18 //y轴字体大小
        //                     }
        //                 },
        //                 series: [
        //                     {
        //                         data: [120, 200, 150, 80, 70, 110, 130, 13, 50],
        //                         type: 'bar',
        //                         showBackground: true,
        //                         smooth: true,
        //                         label: {
        //                             show: true, //柱子是否显示数值
        //                             //数值样式
        //                             color: 'rgba(255,255,255, 1)', //柱子字体颜色
        //                             fontWeight: "normal", //柱子字体粗细
        //                             fontSize: 18 //柱子字体大小
        //                         },
        //                         color: {
        //                             type: 'linear',
        //                             x: 0, // 若将此值设为1，表示从右到左渐变
        //                             y: 1, // 若将此值设为1，表示从上到下渐变
        //                             x2: 0, // 左
        //                             y2: 0, // 上
        //                             colorStops: [
        //                                 {
        //                                     offset: 0,
        //                                     color: 'rgba(0,192,255,1)' // 0% 处的颜色
        //                                 },
        //                                 {
        //                                     offset: 0.9,
        //                                     color: 'rgba(0,192,255,0.4)' // 90% 处的颜色
        //                                 }
        //                             ]
        //                         },
        //                         emphasis: {
        //                             itemStyle: {
        //                                 shadowBlur: 10,
        //                                 shadowOffsetX: 0,
        //                                 // 鼠标移上去颜色
        //                                 shadowColor: 'rgba(0, 0, 0, 0.5)'
        //                             }
        //                         }
        //                     }
        //                 ]
        //             }
        //         }
        //     ]
        // },

        //  {
        //     components: 'bar',
        //     show: true,
        //     // 背景颜色
        //     backgroundColor: 'rgba(19, 44, 108, 0)',
        //     // 边框颜色1
        //     borderColor1: '#6586ec',
        //     // 边框颜色2
        //     borderColor2: '#2CF7FE',
        //     border: 'borderA001',
        //     padding: 10,
        //     pool: '',
        //     pool_name: '',
        //     sql: '',
        //     time: 4,
        //     config: {
        //         title: {
        //             text: '当日入库排名',
        //             left: 'left',
        //             textStyle: {
        //                 // fontWeight: "bold", //标题自提提粗细
        //                 fontSize: 20, //标题字体大小
        //                 color: 'rgba(255,255,255, 0)', // 文字颜色 //标题字体颜色
        //             },
        //         },
        //         tooltip: {
        //             trigger: 'item'
        //         },
        //         grid: {
        //             top: 50, //图像相对元素顶部距离
        //             left: 80, //图像相对元素左边距离
        //             right: 80, //图像相对元右边距离
        //             bottom: 40, //图像相对元底部距离
        //             width: "auto",
        //             height: "auto"
        //         },
        //         // 区域缩放
        //         dataZoom: [
        //             {
        //                 // 第一个 dataZoom 组件
        //                 type: "inside",
        //                 xAxisIndex: 0, // 表示这个 dataZoom 组件控制 第一个 xAxis
        //                 startValue: 0, // 数据窗口范围的起始数值index
        //                 endValue: 4, // 数据窗口范围的结束数值index
        //                 show: true,
        //                 zoomOnMouseWheel: false //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。。
        //                 //     moveOnMouseMove: true,
        //                 //     moveOnMouseWheel: true, //鼠标滚轮实现移动
        //             }
        //         ],
        //         xAxis: {
        //             name: "日期",
        //             type: "category",
        //             data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'], //x轴字段栏位
        //             axisLine: {
        //                 show: true //不显示坐标轴线
        //             },
        //             // 坐标轴名称颜色
        //             nameTextStyle: {
        //                 color: "#FFFFFF",
        //                 fontWeight: "normal", //y轴字体粗细
        //                 fontSize: 18 //y轴字体大小
        //             },
        //             axisLabel: {
        //                 // 文字倾斜
        //                 rotate: 30,
        //                 show: true, //是否显示x轴左边
        //                 color: "red", //x轴字体颜色
        //                 fontWeight: "normal", //x轴字体粗细
        //                 fontSize: 30 //x轴字大小
        //             }
        //         },
        //         yAxis: {
        //             type: 'value',
        //             color: "#FFFFFF",
        //             // 坐标轴名称颜色
        //             nameTextStyle: {
        //                 color: "#FFFFFF",
        //                 fontWeight: "normal", //y轴字体粗细
        //                 fontSize: 18 //y轴字体大小
        //             },
        //             name: "数量",
        //             max:220,
        //             show: true,
        //             axisTick: {
        //                 show: true //不显示坐标轴刻度线
        //             },
        //             axisLine: {
        //                 show: true //不显示坐标轴线
        //             },
        //             splitLine: {
        //                 show: true,
        //                 lineStyle: {
        //                     color: 'rgba(0,192,255,0)',
        //                     width: 1,
        //                     type: 'solid'
        //                 }
        //             },
        //             axisLabel: {
        //                 // 是否显示y轴左边
        //                 show: true,
        //                 color: "red", //y轴字体颜色
        //                 fontWeight: "normal", //y轴字体粗细
        //                 fontSize: 18 //y轴字体大小
        //             }
        //         },
        //         series: [
        //             {
        //                 data: [120, 200, 150, 80, 70, 110, 130, 13, 50],
        //                 type: 'bar',
        //                 showBackground: true,
        //                 smooth: true,
        //                 label: {
        //                     show: true, //柱子是否显示数值
        //                     //数值样式
        //                     color: "red", //柱子字体颜色
        //                     fontWeight: "normal", //柱子字体粗细
        //                     fontSize: 18 //柱子字体大小
        //                 },
        //                 color: {
        //                     type: 'linear',
        //                     x: 0, // 若将此值设为1，表示从右到左渐变
        //                     y: 1, // 若将此值设为1，表示从上到下渐变
        //                     x2: 0, // 左
        //                     y2: 0, // 上
        //                     colorStops: [
        //                         {
        //                             offset: 0,
        //                             color: 'rgba(0,192,255,1)' // 0% 处的颜色
        //                         },
        //                         {
        //                             offset: 0.9,
        //                             color: 'rgba(0,192,255,0.4)' // 90% 处的颜色
        //                         }
        //                     ]
        //                 },
        //                 emphasis: {
        //                     itemStyle: {
        //                         shadowBlur: 10,
        //                         shadowOffsetX: 0,
        //                         // 鼠标移上去颜色
        //                         shadowColor: 'rgba(0, 0, 0, 0.5)'
        //                     }
        //                 }
        //             }
        //         ]
        //     }
        // },

    ]
})

const formatConfigData = computed(() => {

    return {
        backgroundColor: configData.backgroundColor,
        backgroundImages: configData.backgroundImages,
        titleName: configData.titleName,
        titleFontSize: myScale(configData.titleFontSize) + 'px',
        titleFontWeight: configData.titleFontWeight,
        titleFontColor: configData.titleFontColor,
        titleLeftLogo: configData.titleLeftLogo,
        titleLeftLogoWidth: configData.titleLeftLogoWidth + '%',
        titleRightLogo: configData.titleRightLogo,
        titleRightLogoWidth: configData.titleRightLogoWidth + '%',
        titleHeight: myScale(configData.titleHeight) + 'px',
        topHeight: myScale(configData.topHeight) + 'px',
        topLineHeight: myScale(configData.topLineHeight) + 'px',
        topbottom: myScale(configData.topbottom) + 'px',
        topList: configData.topList,
        bottomHeight: 'calc( 100% - ' + myScale(configData.titleHeight) + 'px - ' + myScale(configData.topHeight) + 'px - ' + myScale(configData.topLineHeight) + 'px' + ' )',
        bottomList: configData.bottomList
    }
})



onMounted(async () => {
    console.log(chartId)
    await getEv()
})
onActivated(() => {

})

onUnmounted(() => {


});


const globalonfigEv = (val) => {
    console.log('点击预览', val)
    // console.log(configData.backgroundColor)
    // console.log(val.backgroundColor)
    // console.log(val)
    // configData.backgroundColor=val.backgroundColor
    Object.assign(configData, val)
    refGlobalConfig.value.drawer = false
}

const modelConfigEv = (model, row) => {
    console.log('点击模块配置', model, row)
    modelType.value = model
    modelRow.value = row
    refModelConfig.value.data = configData[model][row].config
    refModelConfig.value.drawer = true
}

const globalConfigEv = () => {
    console.log('点击双击事件')
    refGlobalConfig.value.drawer = true
    Object.assign(refGlobalConfig.value.data, configData)
    console.log(refGlobalConfig.value.data)
}

const aaaa = () => {
    console.log(formatConfigData.value.topList)
}

// 查询数据
const getEv = async (msg) => {
    loading.loading = true
    try {
        let arr_data = await ChartPkGet(chartId)
        if (arr_data.status != 200) {
            return
        }
        if (msg == true) {
            ElMessage.success('查询成功')
        }
        // arr_data.data.result.config.backgroundColor = 'rgba(19, 44, 108, 0)'
        // arr_data.data.result.config.titleHeight = 200
        Object.assign(configData, arr_data.data.result.config)
        console.log(8989, arr_data.data.result)
        if (arr_data.data.result.config.backgroundImages != '') {
            await uploatFiledGetEv('c', arr_data.data.result.config.backgroundImages)
        }
        if (arr_data.data.result.config.titleLeftLogo != '') {
            await uploatFiledGetEv('l', arr_data.data.result.config.titleLeftLogo)
        }

    } catch (error) {
        ElMessage.error('查询接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

const SaveEv = async () => {
    loading.loading = true
    try {
        let arr_data = await ChartPkPut({
            config: configData
        }, chartId)
        if (arr_data.status != 200) {
            return
        }
        ElMessage.success('修改成功')


    } catch (error) {
        ElMessage.error('修改接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

// 预览文件
const uploatFiledGetEv = async (fileType, imgId) => {
    console.log('文件查询')
    loading.loading = true
    try {
        let arr_data = await uploatFiledGet({ id: imgId })
        if (arr_data.status != 200) {
            return
        }
        console.log('文啊啊啊啊啊啊啊件', arr_data)
        const base64String = btoa(
            new Uint8Array(arr_data.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
        )
        if (fileType == 'c') {
            contentBackgroundImage.value = `url("data:image/png;base64,` + base64String + '")'
        } else if (fileType == 'l') {
            logoLeft.value = `data:image/png;base64,` + base64String
        } else {
            logoRight.value = `data:image/png/;base64,` + base64String
        }

    } catch (error) {
        ElMessage.error('获取文件接口请求失败' + error)
    } finally {
        loading.loading = false
    }

}
// 保存数据方法
provide('provideSaveEv', SaveEv);
// 全局配置方法
provide('provideGlobalConfigEv', globalConfigEv);
// 模块配置
provide('provideModelConfigEv', modelConfigEv);

</script>

<style lang='less' scoped>
// @tr-title:  v-bind("formatConfigData.title.height");
// @tr-title:  60px;
// @tr-top: 200px;
// @tr-line: 5px;
// @tr-bottom: calc(100% - @tr-title - @tr-top - @tr-line);

.tr {
    height: 100%;
    background-color: v-bind("formatConfigData.backgroundColor");

}

.title {

    display: flex;
    grid-auto-flow: column;
    align-items: center;
    justify-content: center;
    height: v-bind("formatConfigData.titleHeight");

    .title-right {
        display: flex;
        justify-content: right;
        padding-right: 10px;
        box-sizing: border-box;
        flex: 1;
    }

    .logo-left {
        width: v-bind("formatConfigData.titleLeftLogoWidth");
    }

    .logo-right {
        width: v-bind("formatConfigData.titleRightLogoWidth");
    }

    .title-middle {
        font-size: v-bind("formatConfigData.titleFontSize");
        color: v-bind("formatConfigData.titleFontColor");
        font-weight: v-bind("formatConfigData.titleFontWeight");
        flex: 3;
    }

    .title-left {
        box-sizing: border-box;
        padding-left: 10px;
        flex: 1;
    }
}

.top {
    display: flex;
}

.line {
    display: flex;
    align-items: center;
    height: v-bind("formatConfigData.topLineHeight");
}

.bottom {
    display: flex;


}
</style>